<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        height: 780px;
        /* background-color: bisque; */
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<body>
    <div id="main" style="width: 500px; height: 300px;"></div>
</body>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    left: '30',
    text: '雷达图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    left: '160',
    data: [
      '个人',
      '团队',
    ]
  },
  radar: [
    {
      indicator: [
       
        { text: 'Function', max: 100 }
      ],
      center: ['0%'],
  radius: 80
    },
    {
      indicator: [
        { text: '参团', max: 100 },
        { text: '治疗', max: 100 },
        { text: '伤害', max: 100 },
        { text: '承伤', max: 100 },
        { text: '经济', max: 100 }
      ],
      radius: 80,
      center: ['40%', '50%']
    },
   
  ],
  series: [
    {
      type: 'radar',
      tooltip: {
        trigger: 'item'
      },
      areaStyle: {},
      data: [
        {
          value: [60, 73, 85, 40],
          name: 'A Software'
        }
      ]
    },
    {
      type: 'radar',
      radarIndex: 1,
      areaStyle: {},
      data: [
        {
          value: [85, 90, 90, 95, 95],
          name: '个人'
        },
        {
          value: [95, 80, 95, 90, 93],
          name: '团队'
        }
      ]
    },
    {
      type: 'radar',
      radarIndex: 2,
      areaStyle: {},
      data: [
        {
          name: 'Precipitation',
          value: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
          ]
        },
        {
          name: 'Evaporation',
          value: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
          ]
        }
      ]
    }
  ]
}

myChart.setOption(option)




</script>
</html>